<template>
  <div id="blog" class="infinite-list-wrapper" style="overflow:auto">
    <div v-if="isNoContent" class="noContent">
      没有内容...
    </div>
    <my-article v-else class="article" 
      v-for = "(item,index) in articalMes.list" 
      :key="index"
      :content = "item"></my-article>    
  </div>
</template>

<script>
import myArticle from '@/components/front/home/article.vue'
export default {
  components: {
    myArticle,
  },
  data(){
    return{
      id:'',
      msg:'', //hot,tag,type
      articalMes:{
        list:[]
      },
      params:{ //分页请求参数
          page:1,
          limit:5
      },
      total:0,
      isNoContent:false
    }
  },
  created(){

  },
  mounted(){
    this.articalMes = {}
    this.total = 0
    this.getRouteMes()
    this.getArticalMessage(this.msg, this.id)
    window.addEventListener('scroll',this.dealScroll, true) //1.监听滚动事件(第三个参数必须设置为true)
  },
  watch:{
    $route(newValue){
      this.articalMes = {
        list:[]
      }
      this.total = 0
      this.getRouteMes()
      this.getArticalMessage(this.msg, this.id)
    }, 
  },
  methods:{
    dealScroll(e){ //监听滚动事件
      if(document.getElementById('blog') != null){
        let homescrolltop = document.getElementById('blog').getBoundingClientRect().bottom
        let footerscrolltop = document.getElementById('footer').getBoundingClientRect().top
        if(homescrolltop == footerscrolltop){
          //说明需要发送请求
          this.params.limit = this.params.limit + 2
          this.getArticalMessage(this.msg, this.id)
        }
      }
    },
    //获取路由中的msg和id信息
    getRouteMes(){
      if(this.$route.query.id){
        this.id = this.$route.query.id
      }    
      if(this.$route.query.msg){
        this.msg = this.$route.query.msg
      }
    },
    //根据路由信息获取对应的数据
    async getArticalMessage(msg, id){
      //msg为hot
      if(msg == 'hot'){
        const {data:res} = await this.$http.get('/blog/blogs/hot',{
          params:this.params
        })
        //判断一下res.page里面是否有list这个属性
        if(!res.page.list) res.page.list = []
        this.articalMes = res.page
        this.total = res.page.totalCount
      }else if(msg == 'type'){
        const {data:res} = await this.$http.get('/blog/blogs/info/type/'+this.id,{
          params:this.params
        })
        if(!res.page.list) res.page.list = []
        this.articalMes = res.page
        this.total = res.page.totalCount
      }else if(msg == 'tag'){
        const {data:res} = await this.$http.get('blog/blogs/info/tag/'+this.id,{
          params:this.params
        })
        if(!res.page.list) res.page.list = []
        this.articalMes = res.page
        this.total = res.page.totalCount
      }
      //当没有内容时,显示无内容界面!!!(不能直接使用articalMes.list,会造成每次点击都先出现无内容的界面)
      if(!this.articalMes.list || !this.articalMes.list.length){
        this.isNoContent = true
      }else{
        this.isNoContent = false
      }
    }
  }
}
</script>

<style scoped>
  .infinite-list-wrapper{
    padding-top:20px;
  }
  .noContent{
    width:100%;
    height:100%;
  }
  #blog{
    width:100%;
    height:100%;
  }
  #blog ul{
    display:inline-block;
    height:100%;
    width:100%;
  }
  .article{
    width:80%;
    height:280px;
    /* margin-top:28px; */
    margin-bottom:28px;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    background-color: #fff;
  }
</style>
